<template>
  <confirm-dialog
    :title="$t('user.unbindMobileTitle')"
    :visible="visible"
    :loading="loading"
    @handleClose="handleClose"
    width="25%"
  >
  <template slot="content">
    <span class="tips" v-if="userData.enable_sms_certification === false">{{$t('user.unbindMobileTips')}}</span>
    <span class="tips" v-else>{{$t('user.unbindMobileTipsSms')}}</span>
  </template>
  <template slot="footer">
    <el-button @click="handleClose">{{$t('common.cancel')}}</el-button>
    <el-button :loading="loading"  type="primary" @click="submit">{{$t('common.confirm')}}</el-button>
  </template>
  </confirm-dialog>
</template>
<script lang="ts">
import Vue from 'vue'
import ConfirmDialog from '../../../components/Dialog/confirmDialog.vue';
export default Vue.extend({
  props: {
    submitMethod: {
      type: Function,
      default() {
        return () => Promise.resolve();
      }
    }
  },
  components: {
    ConfirmDialog
  },
  data() {
    return {
      title: '',
      visible: false,
      loading: false,
      content: '',
      data: {},
      item: '',
      userData: '',
      formData: {
        mobile: ''
      }
    }
  },
  methods: {
    init(item: any) {
      (this as any).visible = true;
      (this as any).userData = JSON.parse(JSON.stringify(item));
      (this as any).formData.mobile = "";
    },
    submit() {
      (this as any).loading = true;
      (this as any).submitMethod((this as any).userData, (this as any).formData).then(() => {
        (this as any).handleClose();
      }).finally(() => {
        (this as any).loading = false;
      });
    },
    handleClose() {
      (this as any).formData = {
        mobile: "",
      };
      (this as any).visible = false;
      (this as any).loading = false;
    } 
  }
})
</script>
<style scoped>
.tips {
  font-size: 12px;
  color: gray;
}
</style>
